{% if page.calendar %}
  <link rel="stylesheet" href="/assets/css/components/calendar.css"/>
  <!-- 日历模块 -->
  <h3>Calendar</h3>
  <center id="calendar_container">
    <table>
      <thead id="calendar_header">
        <td>
          <table>
            <td id="pre_month">&lt;</td>
            <td id="show_date"></td>
            <td id="next_month">&gt;</td>
          </table>
        </td>
      </thead>
      <tr id="calendar_weeks">
        <td>
          <table>
            <td class="calendar_column">Sun</td>
            <td class="calendar_column">Mon</td>
            <td class="calendar_column">Tue</td>
            <td class="calendar_column">Wed</td>
            <td class="calendar_column">Thu</td>
            <td class="calendar_column">Fri</td>
            <td class="calendar_column">Sat</td>
          </table>
        </td>
      </tr>
      <tr id="calendar_body">
        <td id="calendar_body_container"></td>
      </tr>
    </table>
  </center>
  <script>
    var today = new Date();

    var articles = new Map();
    {% for article in site.posts %}
      {% assign date = article.date | date: '%Y%m%d' %}
        articles.set('{{ date }}', '{{ article.url }}');
    {% endfor %}
    {% for article in site.wiki %}
      {% assign date = article.date | date: '%Y%m%d' %}
        articles.set('{{ date }}', '{{ article.url }}');
    {% endfor %}

    /**
     * 根据传入的日期生成当月月历
     * 
     * @param date: 某月某日日期
     */
    function generateCalendar(date) {
      var theYear  = date.getFullYear();                          // 当年
      var theMonth = date.getMonth() + 1;                         // 当月
      var theDay   = date.getDate();                              // 当天
      var dayBegin = new Date(theYear, theMonth - 1, 1).getDay(); // 当月第一天在一周的第几天（周日开始）
      var dayCount = new Date(theYear, theMonth, 0).getDate();    // 当月天数
      if (theMonth != today.getMonth() + 1) theDay = 38;          // 如果不是本月，则不可能刚好有今天
      else theDay = today.getDate();

      if (theMonth < 10) theMonth = "0" + "" + theMonth;
      document.getElementById('show_date').innerHTML = theYear + '.' + theMonth; // 年月显示

      var html = '<table><tr>';
      var dayIndex  = 1; // 月中的每一天
      for (var i = 0; i < 37; i++) { // 有的月份最后几天会多出一行，最远是到第 37 个格子，因此直接所有都填满 37 个格子
        if (i <= dayBegin) html += '<td class="calendar_column"></td>'; 
        else if (i > dayBegin + dayCount) html += '<td class="calendar_column" style="opacity: 0">a</td>'; 
        else {
          if (dayIndex < 10) dayIndex = "0" + dayIndex;
          var post = articles.get('' + theYear + theMonth + dayIndex);
          if (post != null) { // 有发布，激活为绿色
            html += '<td class="calendar_column" ><a href="{{ site.url }}' + post + '" style="color:#5a862d;font-weight:bolder"  title="' + post + '"';
          } else {
            html += '<td class="calendar_column" onclick="onDateClick('+ theYear + theMonth + dayIndex + ')" title="这一天偷懒喽"><a ';
          }
          if (dayIndex == theDay) { // 如果是今天，激活为蓝色
            html += 'class="active_date">' + dayIndex + '</a>';
          } else {
            html += 'class="normal_date">' + dayIndex + '</a>';
          }
          dayIndex++;
        }
        if (i % 7 == 0) html += '</tr><tr>';
      }
      html += '</tr></table>';
      document.getElementById("calendar_body_container").innerHTML = html;
    }

    window.onload = function() {
      generateCalendar(today);
    }

    function onDateClick(date) {
      alert(date + "偷懒了一整天，什么都没写");
    }

    // 上一个月
    document.getElementById('pre_month').onclick = function() {
      var targetMonth = parseInt(document.getElementById('show_date').innerHTML.substr(5)) - 1;
      var theYear = parseInt(document.getElementById('show_date').innerHTML.substr(0, 4));
      if (targetMonth == (today.getMonth() + 1) && theYear == today.getFullYear()) {
        generateCalendar(today);
      } else{
        generateCalendar(new Date(theYear, targetMonth - 1, 1));
      }
    }

    // 下一个月
    document.getElementById('next_month').onclick = function() {
      var targetMonth = parseInt(document.getElementById('show_date').innerHTML.substr(5)) + 1;
      var theYear = parseInt(document.getElementById('show_date').innerHTML.substr(0, 4));
      if (targetMonth == (today.getMonth() + 1) && theYear == today.getFullYear()) {
        generateCalendar(today);
      } else{
        generateCalendar(new Date(theYear, targetMonth - 1, 1));
      }
    }
  </script>
{% endif %}